/*
 * 产品分类修改
 * @Author: LuoQianJun
 * @Date: 2018-01-25 17:33:08
 * @Last Modified by: LuoQianJun
 * @Last Modified time: 2018-01-30 09:55:30
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
.ivu-form-item-content {
    img {
        width: 150px;
    }
}
</style>
<template>
<div class="v-admin-product-category-edit">
    <Form ref="formValidate" :model="formValidate" :label-width="80">

        <Form-item label="分类类型" prop="super_id">

            <Select v-if="parseInt(categoryDetail.super_id) === 0" disabled v-model="formValidate.super_id" clearable placeholder="请选择分类类型">
                <Option v-for="( value , key ) in superCategories" :value="key" :key="key">{{ value }}</Option>
            </Select>

            <Select v-else v-model="formValidate.super_id" clearable placeholder="请选择分类类型">
                <Option v-for="( value , key ) in superCategories" :value="key" :key="key">{{ value }}</Option>
            </Select>
        </Form-item>

        <Form-item label="分类名称" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入分类名称"></Input>
        </Form-item>

        <Form-item label="分类描述" prop="description">
            <Input v-model="formValidate.description" type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="请输入分类描述" style="width:400px;"></Input>
        </Form-item>

        <Form-item label="优先级" prop="priority">
            <InputNumber v-model="formValidate.priority" :max="10" :min="0" placeholder="请输入优先级"></InputNumber>
        </Form-item>

        <Form-item label="封面图" prop="thumb">
            <Upload :before-upload="file=>fileChange(file,'thumb','image_info')"
                    :on-remove="file=>fileChange(file,'thumb','image_info')"
                    :multiple="false"
                    accept="image/jpg, image/jpeg, image/png"
                    action="//fake_upload_url/">
                <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
            </Upload>
            <img v-if="image_info.url" :src="image_info.url" alt="封面图">
        </Form-item>

        <Form-item>
            <Button type="primary" @click="updateCategory">更新信息</Button>
        </Form-item>

    </Form>
</div>
</template>

<script>
export default {

    name: 'category-edit',

    props: ['category-detail', 'super-categories'],
    data() {
        return {

            formValidate: {

                _method: 'PUT',

                super_id: '',

                name: '',

                description: '',

                priority: 0,

                thumb: ''

            }, //编辑信息时的表单

            category_id: '',

            // 上传的图片信息
            image_info: {
                name: '',
                url: '' //这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
            }

        }
    },
    watch: {

        'categoryDetail': function() {

            if (this.categoryDetail) {

                this.formValidate.super_id = this.categoryDetail.super_id + '';

                this.formValidate.name = this.categoryDetail.name;

                this.formValidate.description = this.categoryDetail.description;

                this.formValidate.priority = this.categoryDetail.priority;

                this.formValidate.thumb = this.categoryDetail.thumb;

                this.category_id = this.categoryDetail.id;

                this.image_info.url = this.categoryDetail.thumb;

            }

        }

    },
    methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file, param, info) {

            this[info].name = file.name;

            this[info].url = '';

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 更新产品分类信息
         * @return {undefined}
         */
        updateCategory() {

            this.$emit('update', this.categoryDetail.id, this.formDataCreate());

        },

        /**
         * 手动拼接formdata数据
         * @return {Object}
         */
        formDataCreate() {

            const new_object = {

                _method: 'PUT',

                super_id: this.formValidate.super_id,

                name: this.formValidate.name,

                description: this.formValidate.description,

                priority: this.formValidate.priority,

                thumb: this.formValidate.thumb

            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key) => {

                if (!new_object[key]) return;

                form_data.append(key, new_object[key]);

            });

            return form_data;

        }

    }
}
</script>